<!DOCTYPE html>

<html>
<head>
    <title>Nut Quester</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript" src="javascript/knockout-2.2.0.js"></script>
    <script type="text/javascript" src="javascript/jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
        // constants
        var PATH, TILE_GRASS, TILE_WATER, body, TILE_WIDTH, TILE_HEIGHT, avatar, mapData;
        
        // Initialize Constants
        PATH = "assets/images/PlanetCute/PlanetCuteGameImages/";
        TILE_GRASS = "Grass Block.png";
        TILE_WATER = "Water Block.png"
        TILE_TREE_SHORT = "Tree Short.png";
        CHARACTER_GIRL_IMG_NAME = "Character Horn Girl.png";
        
        
        
        TILE_WIDTH = 101;
        TILE_HEIGHT = 83;
        
        var sources = {
            tileGrassImg: PATH + TILE_GRASS,
            tileWaterImg: PATH + TILE_WATER,
            tileTreeShortImg: PATH + TILE_TREE_SHORT,
            characterGirlImg: PATH + CHARACTER_GIRL_IMG_NAME
          };
    
        
        function Sprite(name, x, y)
        {
            this.name = name;
            this.x = x;
            this.y = y;
        }
        
        function MovableSprite(name, x, y)
        {
            
            
        }
        
        // load images (from http://www.html5canvastutorials.com/tutorials/html5-canvas-image-loader/)
        /**
         *  Generic image loader that will return an array of images. 
         */
        function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for(var src in sources) {
              numImages++;
            }
            for(var src in sources) {
              images[src] = new Image();
              images[src].onload = function() {
                if(++loadedImages >= numImages) {
                  callback(images);
                  
                }
              };
              images[src].src = sources[src];
              //document.write('<img src="' + images[src].src + '" />');// Write to page (uncomment to check images)

            }
        }
        
        
        
        // create canvas
        function createCanvas(id, width, height)
        {
            var canvas = document.createElement('canvas');
            canvas.id     = id;
            canvas.width  = width;
            canvas.height = height;
            //canvas.style.zIndex   = 8;
            canvas.style.position = "absolute";
            canvas.style.border   = "1px solid";
            return canvas;
                        
        }
        function paint(mapData, context)
        {
            // paint landscape
            for(var row=0, lenRow= mapData.length; row < lenRow; row++)
            {
              for(var col=0, lenCol = mapData.length; col < lenCol; col++)
                {
                    var drawingImg = mapData[row][col];
                    context.drawImage(drawingImg, TILE_WIDTH * row, TILE_HEIGHT * col );
                }
            }
        }
        
        function paintCharacter(characterImg, context, x_pos, y_pos)
        {
           context.drawImage(characterImg, x_pos, y_pos);
        }
        
        
        function initGame(images)
        {
            mapData = [[ images.tileGrassImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg],
                        [images.tileGrassImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg],
                        [images.tileGrassImg, images.tileWaterImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg],
                        [images.tileGrassImg, images.tileWaterImg, images.tileGrassImg, images.tileGrassImg, images.tileGrassImg],
                        [images.tileGrassImg, images.tileWaterImg, images.tileGrassImg, images.tileGrassImg, images.tileWaterImg]];
        
           
            // set up canvas
            var canvas = createCanvas("canvas", 505, 855);
            body = document.getElementsByTagName("body")[0];
            body.appendChild(canvas);
            var context = canvas.getContext('2d');
    
            
            // set up the map, 101, 171px
            // Water Block.png, Stone Block.png, Plain Block.png, Grass Block.png, Dirt Rock.png
            paint(mapData, context );
            
            paintCharacter(images.characterGirlImg, context, 30, 30 );
            
            paintCharacter(images.tileTreeShortImg, context, (TILE_WIDTH * 4), (TILE_HEIGHT * 2) );
            
            
            //Character Horn Girl.png
            
            //repaint every 60 milliseconds
            //game_loop = setInterval(paint, 60);
            
            }

        //Lets add the keyboard controls now
	$(document).keydown(function(e){
		var key = e.which;
		//We will add another clause to prevent reverse gear
		if(key == "37" && d != "right") d = "left";
		else if(key == "38" && d != "down") d = "up";
		else if(key == "39" && d != "left") d = "right";
		else if(key == "40" && d != "up") d = "down";
	})
        
       function initNutQuest()
        {
            loadImages(sources, initGame)
        }
        
        
    </script>
</head>

<body onload="loadImages(sources, initGame)">
    


</body>
</html>
